<template>
  <div class="zeroqueue" @click.self="colsequeue">
    <!-- <transition  enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown"> -->
    <div class="queue" v-if="$store.state.openplayList">
      <div class="top">
        <div class="mode">
          <i
            class="iconfont"
            :class="$store.state.playmode==1? 'icon-danquxunhuan' : $store.state.playmode==2?'icon-suijibofang':'icon-xunhuanbofang'"
            @click="changemode"
          ></i>
          <span>{{$store.state.playmode==1? '单曲循环' : $store.state.playmode==2?'随机播放':'列表循环'}}</span>
        </div>
        <i class="iconfont icon-del1" @click="delplaylist"></i>
      </div>
      <div class="list wrapper" ref="wrapper">
        <div class="content">
          <div class="item" v-for="(item,index) in songqueue" :key="index">
            <div class="name" @click="playSong(item,index)">
              <p
                :class="$store.state.curplayList[$store.state.curindex].id==item.id?'act':''"
                :style="{'color':$store.state.curplayList[$store.state.curindex].id==item.id?'#d43c33':''}"
              >
                <i
                  class="iconfont icon-erji"
                  style="color:#d43c33"
                  v-if="$store.state.curplayList[$store.state.curindex].id==item.id"
                ></i>
                {{item.name}}
                <span>- {{item.ar?item.ar[0].name:item.artists[0].name}}</span>
              </p>
            </div>
            <i class="iconfont icon-icon-del2" @click="delcur(index)"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- </transition>  -->
  </div>
</template>


<script>
import BScroll from "better-scroll";
export default {
  name: "zeroqueue",
  data() {
    return {
      falg: false
    };
  },
  methods: {
    //关闭播放列表
    colsequeue() {
      this.$store.commit("openPlayList", false);
    },
    //点击播放列表中的音乐播放但不关闭播放列表
    playSong(item, index) {
      this.audio.playSong(this.songqueue[index].id);
      this.$store.commit("curIndex", index);
    },
    //清空播放列表
    delplaylist() {
      //关闭音乐
      this.audio.pause();
      //清空列表
      this.$store.commit("curPlayList", []);
      //当前播放下标
      this.$store.commit("curIndex", -1);
      //关闭播放列表
      this.$store.commit("openPlayList", false);
      //关闭播放器
      this.$store.commit("openPlayer", false);
    },
    //切换模式
    changemode() {
      this.$store.commit("playMode");
    },
    //从播放列表中删除当前歌曲
    delcur(index) {
      this.$store.commit("delCur", index);
    }
  },
  computed: {
    //监听歌曲下标变化
    songqueue() {
      return this.$store.state.curplayList;
    }
  },
  watch: {
    flag2: () => {
      console.log("666");
      this.$nextTick(() => {});
    }
  },

  // better-scroll的函数
  mounted() {
    this.flag = this.$store.state.openplayList;
    this.$nextTick(() => {
      //$refs绑定元素
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //开启点击事件 默认为false
          click: true,
          mouseWheel: true
        });

        // console.log(this.scroll)
      } else if (!this.$refs.wrapper) {
        return;
      } else {
        this.scroll.refresh();
      }
    });
    this.$nextTick(() => {
        this.scroll.scrollToElement(".act", 500, false, true, "easing");
    });
  
  }
};
</script>


<style lang='scss'>
.zeroqueue {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20;
  top: 0;
  bottom: 0;
  position: fixed;
  .queue {
    background-color: #fff;
    position: absolute;
    top: 35vh;
    bottom: 0;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      border-bottom: 1px solid #a2a2a2;
      line-height: 45px;
      .mode {
        font-size: 14px;
        span {
          margin-left: 10px;
        }
      }
      i {
        font-size: 22px;
      }
    }
    .list {
      width: 100%;
      position: absolute;
      top: 50px;
      bottom: 0;
      overflow: hidden;
      .item {
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        box-shadow: 0px 1px 0px #dfdddd;
        line-height: 40px;
        .name {
          width: 88%;
          p {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span {
            font-size: 10px;
            color: #6a6a6a;
          }
        }
      }
    }
  }
}
</style>

